<template>
	<view class="AddCostContainer">
		<view class="SelectRoomsBox">
			<text>选择房号</text>
			<view class="SelectBox">
				<uni-data-picker class="Building" :localdata="Building" popup-title="请选择楼数" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
				<uni-data-picker class="floor" :localdata="Floor" popup-title="请选择层数" @change="floor_onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
			</view> 
			<view class="floors" v-show="showF">
				<button type="default" class="room" v-for="(item,index) in Room" @click="xz_button(item.Num)" :key="item.id">{{item.Num}}</button>
				<!-- <uni-data-checkbox checked class="room" mode="tag"  v-model="value" :localdata="Room" @change="change" 
					@tap="toAdd()">
				</uni-data-checkbox> -->
			</view>
			<button form-type="submit" v-show="isBtnShow" class="sub_button" @click="toAddReading()">下一步</button>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				checked:false,
				isBtnShow: false,
				Building: [{
					id: '',
					text: "",
					value: ""
				}],
				Floor: [{
					id: '',
					text: "",
					value: ""
				}],
				Room: [{
					id: '',
					Num: '',
					value: '',
					text: ''
				}],
				filterResult: [{}],
				buildingId: '',
				floorId: '',
				value: 0,
				clickValue: '',
				showF: false,
				showFlag: true
			}
		},
		onLoad() {
			this.getBuilding();
			// console.log(uni.getStorageSync('x-auth-token') || '')
		},
		onShow() {
			this.checked = false
		},
		methods: {
			
			xz_button(clickValue){
				// console.log(clickValue)
				uni.navigateTo({
					url: "/pages/smartHome/home/equipment?uniqueNo=" + clickValue
				})
				
				// 测试
				// uni.navigateTo({
				// 	url: "/pages/smartHome/home/familyRecord?uniqueNo=" + clickValue
				// })
				
			},
			floor_onchange(e) {
				const value = e.detail.value
				// console.log("cccc",value)
				this.floorId = e.detail.value[0].floorId
				this.isBtnShow = false
				this.house(this.buildingId, this.floorId)
			},
			onchange(e) {
				const value = e.detail.value
				this.clickValue = ''
				this.isBtnShow = false
				this.buildingId = e.detail.value[0].buildingId
				// console.log("sdfsf",this.buildingId )
				this.floorId = ''
				this.getFloor(this.buildingId)
				this.house(this.buildingId)
			},
			onnodeclick(node) {},
			async getBuilding() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/house/building/',
						method: "get",
					})
				this.Building = res.body.houseBuilding.data
				console.log("执行hideF", res.body.houseBuilding.data)
				let inBuilding = res.body.houseBuilding.data

				//第一步 【改数组】 处理分类数据
				for (let i in inBuilding) {
					if (inBuilding[i].buildingId) {
						//把数组的 buildingid字段改名为id
						inBuilding[i].id = inBuilding[i].buildingId;
						//把字段的 楼房名称【buildingName】 改名为title
						inBuilding[i].text =
							"*" + inBuilding[i].buildingName + "*    " + inBuilding[i].buildingNo + "栋";
						//把数组的 buildingNo字段改名为value
						inBuilding[i].value = inBuilding[i].buildingNo;
					}
				}
				//把处理后的分类数组 赋值
				this.Building = inBuilding;
				// console.log("执行hideF", inBuilding)
				this.showF = false
			},

			async getFloor(buildingId) {
				// console.log("getFloor内=bNo=" + buildingId)
				const res = await this
					.$myRequest({
						url: '/api-sale/config/house/floor/?buildingId=' + this.buildingId,
						method: 'get'
					})
				this.Floor = res.body.houseFloor.data
				let inFloor = res.body.houseFloor.data

				//第一步 【改数组】 处理分类数据
				for (let i in inFloor) {
					if (inFloor[i].floorId) {
						//把数组的 floorId字段改名为id
						inFloor[i].id = inFloor[i].floorId;
						//把字段的 楼房名称【floorName】 改名为title
						inFloor[i].text = inFloor[i].floorName;
						//把数组的 floorNo字段改名为value
						inFloor[i].value =
							inFloor[i].floorNo;
					}
				}
				//把处理后的分类数组 赋值
				this.Floor = inFloor;
				// this.showF = false
			},

			async house(buildingId, floorId) {
				// console.log("house()内，buildingId=" + this.buildingId)
				// console.log("house()内，floorId=" + this.floorId)
				const res = await this
					.$myRequest({
						url: '/api-sale/config/house/house-info/?buildingId=' + this.buildingId +
							"&floorId=" + this.floorId +"&pageSize=" + 100,
						method: 'get'
					})
				// .$myRequest({
				// 	url: '/api-sale/config/house/house-info/?buildingId=2c9d799c79f4a2f10179f4ba32b00001'+
				// 	'&floorId=2c9d799c79f4a2f10179f4ba33e70003',
				// 	method: 'get'
				// })
				this.Room = res.body.houseInfo.data
				let inrooms = res.body.houseInfo.data


				//第一步 【改数组】 处理分类数据
				for (let i in inrooms) {
					if (inrooms[i].houseId) {
						//把数组的 houseId字段改名为id
						inrooms[i].id = inrooms[i].houseId;
						//把字段的 房屋名称【houseNo】 改名为num
						inrooms[i].Num = inrooms[i].uniqueNo;
						//把字段的 房屋名称【houseNo】 改名为text
						inrooms[i].text = inrooms[i].uniqueNo;
						//把数组的 houseNo字段改名为value
						inrooms[i].value = inrooms[i].houseName;
					}
				}
				//把处理后的分类数组 赋值
				this.Room = inrooms;
				// console.log(this.Room)
				this.showF = true
			},
			change(e) {
				console.log('e:', e);
				console.log("no=" + e.detail.data.Num)
				
				this.clickValue = e.detail.data.Num
				
				uni.navigateTo({
					url: "/pages/smartHome/home/familyRecord?uniqueNo=" + this.clickValue
				})
				
				
				// if (this.clickValue == '') {
				// 	this.isBtnShow = false
				// } else {
				// 	this.isBtnShow = true
				// }

			},
			toAdd() {
				uni.navigateTo({
					url: "/pages/smartHome/home/familyRecord"
				})
				console.log("单击事件 属性为" + this.clickValue)
			},

		}
	}
</script>


<style lang="scss">
	.AddCostContainer {
		display: flex;
		justify-content: center;
	}

	.SelectRoomsBox {
		width: 632rpx;
		padding-top: 60rpx;
	}

	.SelectBox {
		display: flex;
		justify-content: space-between;
		margin: 24rpx 0 40rpx 0;
	}

	.Building,
	.floor {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 300rpx;
	}

	.floors {
		
		
		  display: grid;
		  grid-template-columns: auto auto auto;
		  // grid-gap: 10px;
		
		  // padding: 10px;
		
		
		
		
		// padding: 0;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: flex-start;
		button {
			// background: #000000;
			width: 200rpx;
			margin-top: 20rpx;
			font-size: 32rpx;
		}
		
	}

	.floors:nth-child {
/* 		width: 190rpx;
		background-color: #FFFFFF;

		font-size: 32rpx;


		border: none;

		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center; */
	}

	button:active {
		
		background-color: #109EF8;
		color: #FFFFFF;
	}

	.sub_button {
		height: 38px;
		width: 90.6%;
		background-color: #109EF8;
		color: #FFFFFF;
		line-height: 38px;
		text-align: center;
		margin: 48px auto 0 auto;
		border-radius: unset;
	}
</style>
